<template>
  <el-dialog
    :title="dialogConfig.title + dialogConfig.afterTitle"
    v-model="dialogConfig.visible"
    :width="dialogConfig.width"
    :before-close="handleClose"
    append-to-body
    destroy-on-close
  >
    <el-form
      ref="formRef"
      :model="formData"
      :rules="rules"
      label-width="120px"
      :disabled="dialogConfig.loading"
    >
      <el-form-item label="操作类型名称" prop="name">
        <el-input
          v-model="formData.name"
          placeholder="请输入操作类型名称"
          clearable
        />
      </el-form-item>

      <el-form-item label="描述" prop="description">
        <el-input
          v-model="formData.description"
          type="textarea"
          :rows="3"
          placeholder="请输入操作类型描述"
          clearable
        />
      </el-form-item>

      <el-form-item label="状态" prop="isActive" v-if="!dialogConfig.isAdd">
        <el-switch
          v-model="formData.isActive"
          active-text="启用"
          inactive-text="停用"
        />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose" :disabled="dialogConfig.loading">
          取消
        </el-button>
        <el-button
          type="primary"
          @click="submitForm"
          :loading="dialogConfig.loading"
        >
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import { defineComponent, reactive, ref } from "vue";
import { messageSuccess, messageError } from "@/action/MessagePrompt.js";
import operationTypesApi from "@/http/operationTypes.js";

export default defineComponent({
  name: "EditOperationTypeDialog",
  setup() {
    const formRef = ref(null);
    
    // 对话框配置
    const dialogConfig = reactive({
      visible: false,
      title: "操作类型",
      afterTitle: "",
      width: "600px",
      loading: false,
      isAdd: false,
      resolve: null,
      reject: null
    });

    // 表单数据
    const formData = reactive({
      id: null,
      name: "",
      description: "",
      isActive: true
    });

    // 表单验证规则
    const rules = {
      name: [
        { required: true, message: "操作类型名称不能为空", trigger: "blur" },
        { min: 2, max: 50, message: "长度在 2 到 50 个字符", trigger: "blur" }
      ],
      description: [
        { max: 200, message: "描述不能超过 200 个字符", trigger: "blur" }
      ]
    };

    // 初始化对话框
    function initData(visible, data, options = {}) {
      return new Promise((resolve, reject) => {
        dialogConfig.visible = visible;
        dialogConfig.resolve = resolve;
        dialogConfig.reject = reject;
        
        // 设置对话框配置
        Object.assign(dialogConfig, options);
        
        if (data) {
          // 编辑模式：填充表单数据
          Object.assign(formData, data);
        } else {
          // 新增模式：重置表单数据
          resetForm();
        }
      });
    }

    // 重置表单
    function resetForm() {
      formData.id = null;
      formData.name = "";
      formData.description = "";
      formData.isActive = true;
      
      if (formRef.value) {
        formRef.value.clearValidate();
      }
    }

    // 关闭对话框
    function handleClose() {
      dialogConfig.visible = false;
      if (dialogConfig.reject) {
        dialogConfig.reject(new Error("用户取消"));
      }
    }

    // 提交表单
    async function submitForm() {
      if (!formRef.value) return;
      
      try {
        const valid = await formRef.value.validate();
        if (!valid) return;
        
        dialogConfig.loading = true;
        
        if (dialogConfig.isAdd) {
          // 新增操作类型
          await operationTypesApi.createOperationType(formData);
          messageSuccess("新增操作类型成功");
        } else {
          // 编辑操作类型
          await operationTypesApi.updateOperationType(formData.id, formData);
          messageSuccess("更新操作类型成功");
        }
        
        dialogConfig.visible = false;
        if (dialogConfig.resolve) {
          dialogConfig.resolve();
        }
      } catch (error) {
        console.error("操作类型操作失败:", error);
        messageError(dialogConfig.isAdd ? "新增操作类型失败" : "更新操作类型失败");
      } finally {
        dialogConfig.loading = false;
      }
    }

    return {
      dialogConfig,
      formData,
      rules,
      formRef,
      initData,
      handleClose,
      submitForm
    };
  }
});
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: right;
}
</style>